<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="csrf-token" content="{{ csrf_token() }}">
		<title>@yield('title')</title>
		<link rel="stylesheet" href="{{asset('resources/plugins/elementui/element-ui/lib/theme-chalk/index.css')}}">
		<link rel="stylesheet" href="{{asset('public/static/common/css/bootstrap.min.css')}}">
		<link rel="stylesheet" href="{{asset('public/static/common/css/animate.min.css')}}">
		<link rel="stylesheet" href="{{asset('public/static/common/css/font-awesome.min.css')}}">
		<link rel="stylesheet" href="{{asset('public/static/admin/css/style.min.css')}}">
		<link rel="stylesheet" href="{{asset('public/static/admin/css/reset.css')}}">
		<script src="{{asset('public/static/common/js/jquery.min.js')}}"></script>
		<script src="{{asset('resources/plugins/elementui/vue/vue.js')}}"></script>
		<script src="{{asset('resources/plugins/elementui/element-ui/lib/index.js')}}"></script>
		<script src="{{asset('resources/plugins/pace/pace.min.js')}}"></script>
		<style media="screen">
			.layout-left {
				width: 220px;height: 100%;float: left;background-color: #2f4050;
			}
			.layout-left-mini {
				width: 64px;height: 100%;float: left;background-color: #2f4050;
			}
			.layout-right{
				width: calc(100% - 220px);height: 100%;float: left;
			}
			.layout-right-mini{
				width: calc(100% - 64px);height: 100%;float: left;
			}
			#layout-right #AsideBar{
				height: 100%;
			}
			#layout-right #TopBar{
				height: 60px;
				line-height: 60px;
				width: 100%;
				overflow: hidden;
				border-bottom: 3px solid #2f4050;
			}
			#layout-right #Main{
				height: calc(100% - 100px);
				width: 100%;
				background-color: #f3f3f4;overflow: auto;
				padding: 15px;
				overflow: auto;
			}
			#layout-right #Footer{
				background-color: #FFF;height: 36px;line-height: 36px;text-align: right;
				padding: 0 15px;
			}
			.logobox{
				width: 100%;
				height: 60px;
				border-bottom: 1px solid #ccc;
				background-color: #2f4050;
			}
			.logobox img {
				transition: all 0.1s;
			}
			.left-menu{
				border-right:none;
				font-weight: 999;
			}
			.left-menu li .col-btn{
				margin-top: 15px;
				margin-right: 20px;
				padding:5px;
				font-weight: 999;
				background-color: #6d8399;
				border-color: #6d8399;
				opacity: 0.5;
				transition: all 0.4s;
			}
			.left-menu li .col-btn:hover{
				opacity: 1
			}
			#TopBar ul {
				list-style: none;
				margin: 0;
				padding: 0;
				overflow: hidden;
			}
			#TopBar ul li {
				text-align: center;
				display: block;
			}
			#TopBar .topbar-left{
				float: left;
				width: 50%;
				padding-left: 15px;
			}
			#TopBar .topbar-right{
				height: 60px;
				float: right;
				width: 50%;
				padding-right: 15px;
			}
			#TopBar .topbar-right li{
				height: 60px;
				line-height: 60px;
				float: right;
				margin-left: 15px;
				width: 100px;
			}
			#TopBar .topbar-right li .opt-btn{
				float: left;
				margin-top: 15px;
			}
			#TopBar .topbar-left li{
				float: left;
				margin-right: 15px;
			}
			#HeadPic{
				border-radius: 50%;
			}
			#TopBar .topbar-right li .el-badge__content.is-fixed{
				top: 15px;
			}
			#Footer .el-breadcrumb{
				line-height: 36px;
				float: left;
				text-align: left;
			}
			#Footer .el-breadcrumb h4 {
				line-height: 36px;float: left;
				margin: 0;padding: 0;
				color:#409EFF;
			}
			#Main .box-card-full {
				height: 100%;
			}
			#AsideBar .el-submenu__title {
				height: 35px;line-height: 35px;
			}
			#AsideBar .el-menu-item {
				height: 35px;line-height: 35px;
			}
			.el-menu-item, .el-submenu__title{
				height: 35px;line-height: 35px;
			}
			.el-submenu .el-menu-item{
				height: 35px;line-height: 35px;
			}
			.pace .pace-progress{
				height: 5px;
				background: #409EFF;
			}
			.pace .pace-progress{
				top: 60px;z-index: 0;
			}
		</style>
		@yield('style')
	</head>
	<body>
		<div>@yield('Component')</div>
		<div id="AsideBar" :class="layout_left_class">
			<div id="AsideBar-menu">@yield('AsideBar')</div>
		</div>
		<div id="layout-right" class="layout-right-mini">
			<div id="TopBar">@yield('TopBar')</div>
			<div id="Main">@yield('Main')</div>
			<div id="Footer">@yield('Footer')</div>
		</div>
	</body>
</html>
